{% extends './views/layout/layout.html' %}

{% block head %}
<link rel="stylesheet" href="/public/css/index.css" />
{% endblock %}

{% block main %}
<div class="main">
  <div class="container">

  </div>
</div>

{%endblock%}

{% block js %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const con = document.querySelector(".main .container")
  // ajax获取数据
  axios({
    method: "get",
    url: "/api/getAllItems"
  }).then(res => {
    if (res.status === 200 && res.data.length > 0) {
      let domStr = ""
      res.data.forEach(category => {
        domStr = `
            <div class="brick-box">
              <div class="h">
                <h2 class="title">${category.dataValues.name}</h2>
                <div class="more">
                  <a href="/list/${category.dataValues.id}">更多</a>
                </div>
              </div>
              <div class="c clearfix">
                <ul class="list clearfix">
                  ${category.items.map(item => {
          return `<li class="item">
                    <a href="/detail/${item.id}">
                      <div class="figure">
                        <img src="/public/images/${item.cover}" alt="" />
                      </div>
                      <h3 class="title">${item.name}</h3>
                      <p class="desc">${item.description}</p>
                      <p class="price"><span class="num">${item.price}</span>元</p>
                    </a>
                  </li>`
        }).join("")}
                </ul>
              </div>
            </div>`
        con.innerHTML += domStr
      });

    } else {
      con.innerHTML = "出错了！ 暂无数据"
    }

  })

</script>

{%endblock%}
